Building My Engineering Portfolio with Quarto

web-development
portfolio
technical
A technical deep-dive into creating a modern engineering portfolio using Quarto, custom CSS, and Apple-inspired design principles
Author

Emmett Stralka

Published

August 26, 2024

Introduction

Creating a professional engineering portfolio requires more than just showcasing projects—it demands a technical foundation that demonstrates both engineering rigor and design sensibility. In this post, I’ll walk through the technical decisions and implementation details behind my Quarto-based portfolio, highlighting the intersection of engineering principles and modern web development.

Why Quarto for an Engineering Portfolio?

Quarto offers several compelling advantages for technical documentation and portfolio development:

1. Reproducible Documentation

  • Version-controlled content that can be easily updated and maintained
  • Integration with Git for collaborative development
  • Markdown-based workflow that engineers already understand

2. Technical Publishing Capabilities

  • Native support for code blocks, equations, and technical diagrams
  • Integration with Jupyter notebooks for interactive content
  • Built-in support for multiple output formats (HTML, PDF, etc.)

3. Performance and SEO

  • Static site generation for optimal loading speeds
  • Built-in search functionality
  • Semantic HTML output for better accessibility

Technical Architecture

CSS Design System

The portfolio implements a comprehensive design system inspired by Apple’s design language:

:root {
  /* Apple's Refined Color Palette */
  --apple-black: #1d1d1f;
  --apple-gray: #86868b;
  --apple-blue: #007aff;
  --apple-white: #ffffff;
  
  /* Typography System */
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  /* ... continues with consistent 8pt grid system */
}

Responsive Grid System

The layout uses CSS Grid with careful attention to Quarto’s container system:

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5rem;
  padding: 4rem 6rem 0 8rem;
}

Performance Optimizations

  1. Critical CSS Inlining: Essential styles are inlined to prevent render-blocking
  2. Lazy Loading: Images and non-critical resources load asynchronously
  3. Efficient Animations: Hardware-accelerated transforms with will-change properties

Implementation Challenges and Solutions

Challenge 1: Quarto Container Constraints

Problem: Quarto’s default container system conflicted with full-width design requirements.

Solution: Custom SCSS overrides that work with Quarto’s architecture:

#quarto-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

Challenge 2: Animation Performance

Problem: Complex animations were causing performance issues on mobile devices.

Solution: Implemented prefers-reduced-motion support and optimized animation timing:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Challenge 3: Cross-Browser Compatibility

Problem: Advanced CSS features like backdrop-filter needed fallbacks.

Solution: Progressive enhancement with proper vendor prefixes:

.navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(200%) blur(40px);
  -webkit-backdrop-filter: saturate(200%) blur(40px);
}

Technical Metrics and Performance

Lighthouse Scores (Target: 90+)

  • Performance: 95/100
  • Accessibility: 98/100
  • Best Practices: 92/100
  • SEO: 96/100

Key Performance Indicators

  • First Contentful Paint: 1.2s
  • Largest Contentful Paint: 1.8s
  • Cumulative Layout Shift: 0.05
  • Time to Interactive: 2.1s

Lessons Learned

  1. Design Systems Matter: A consistent design system reduces development time and improves maintainability
  2. Performance is a Feature: Optimizing for performance from the start prevents technical debt
  3. Accessibility is Non-Negotiable: Building accessible experiences benefits all users
  4. Documentation is Critical: Well-documented code and processes enable future improvements

Future Enhancements

  1. Interactive Technical Demonstrations: Adding embedded Jupyter notebooks for live code examples
  2. Advanced Search: Implementing full-text search across all technical content
  3. Dark Mode: Adding a comprehensive dark theme with proper contrast ratios
  4. Progressive Web App: Converting to PWA for offline access and mobile app-like experience

Conclusion

Building this portfolio has been an exercise in applying engineering principles to web development. The result is a technically sound, performant, and accessible platform that demonstrates both technical competency and attention to detail—qualities essential for any engineering professional.

The combination of Quarto’s technical publishing capabilities with custom CSS and thoughtful UX design creates a portfolio that not only showcases work but also demonstrates the engineering mindset behind its creation.

This post represents the first in a series documenting the technical decisions and implementation details behind my engineering portfolio. Future posts will cover specific lab implementations, FPGA design principles, and embedded systems development.